<template>
  <div class="call-police">
    <div class="row justify-around items-center call-header">
      <div class="h-title ellipsis"
           style="width:118px;margin-left: 12px">{{this.statusList[4].label}}编号
        <q-tooltip>{{this.statusList[4].label}}编号</q-tooltip>
      </div>
      <div class="h-title ellipsis"
           style="width:70px ">{{this.statusList[4].label}}类型
        <q-tooltip>{{this.statusList[4].label}}类型</q-tooltip>
      </div>
      <div class="h-title ellipsis"
           style="width:calc(100% - 380px)">{{this.statusList[4].label}}原因
        <q-tooltip>{{this.statusList[4].label}}原因</q-tooltip>
      </div>
      <div class="h-title ellipsis"
           style="width:135px">{{this.statusList[4].label}}发生时间
        <q-tooltip>{{this.statusList[4].label}}发生时间</q-tooltip>
      </div>
    </div>
    <div class="overflow-auto scrollbar" style="height: 300px">
        <ul class="item q-pt-sm">
          <li v-for="(item,index) in listData"
              :key="index"
              class="row justify-around items-center q-mb-sm">
            <div style="width:118px;font-size:14px;margin-left: 12px"
                 class="text-ellipsis">{{item.alarmNo || '--'}}
              <q-tooltip>{{item.alarmNo || '--'}}</q-tooltip>
            </div>
            <div style="width:70px;font-size:14px">
              <div class="text-ellipsis">{{item.alarmType || '--'}}</div>
              <q-tooltip>{{item.alarmType || '--'}}</q-tooltip>
            </div>
            <div style="width:calc(100% - 380px);font-size:14px">
              <div class="text-ellipsis">{{item.eventDesc || '--'}}</div>
              <q-tooltip>{{item.eventDesc || '--'}}</q-tooltip>
            </div>
            <div style="width:135px;font-size:14px"
                 class="text-ellipsis">{{setTime(item.time) || '--'}}</div>
            <q-tooltip>{{setTime(item.time)  || '--'}}</q-tooltip>
          </li>
        </ul>
        <div v-if="!listData.length" class="text-center" style="height: 50px; line-height:50px; color: #d3d3d3;">暂无数据</div>
    </div>
  </div>
</template>

<script>
import { date } from 'quasar'
import { getMachineStatusDetails } from 'src/boot/status-monitor/machine'
import { mapGetters } from 'vuex'
export default {
  name: 'call-police',
  components: {
  },
  data () {
    return {
      listData: []
    }
  },
  watch: {
    listData: {
      handler (val) {
        this.$emit('isShowPolice', val.length)
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters(['statusList']),
    scrollOption () {
      return {
        waitTime: 2500,
        hoverStop: false, // 是否开启鼠标悬停stop
        limitMoveNum: 7
      }
    }
  },
  methods: {
    // 获取机床详情数据（开动率，停机时长，报警记录）
    getMachineStatusDetails (val) {
      // 获取本页接口数据
      getMachineStatusDetails(val.boxId, val.id).then(res => {
        const ret = res.data.alarms.reverse()
        ret.map(v => {
          const item = v
          item.eventDesc = v.cause
          item.alarmType = v.type
          item.alarmNo = v.id
          item.overFlag = false
        })
        this.listData = ret
          .filter(v => {
            return !v.overFlag
          })
      })
    },
    // 过滤消除的报警
    filterData (val) {
      this.listData.unshift(val)
    },
    setTime (val) {
      return date.formatDate(val, 'YYYY-MM-DD HH:mm:ss')
    }

  },
  mounted () {}
}
</script>

<style lang="scss" scoped>
.call-police{
  height: 100%;
  .call-header{
    height: 39px;
    border-bottom: 1px solid #D3D3D3;
  }
}
</style>
